<template>
  <MyModal ref="myModal" title="导入规则" :top="40" :width="700">
    <template #content>
      <div style="display: flex; justify-content: center; margin-right: 60px">
        <a-form
          ref="loginForm"
          :model="formState"
          :rules="rules"
          :label-col="labelCol"
          style="width: 500px; margin-bottom: 20px"
        >
          <a-form-item name="keyword" label="导入方式">
            <a-select v-model:value="formState.type" @change="change" placeholder="请选择">
              <a-select-option v-for="(item, index) in typeList" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item name="content" :label="labelText">
            <template #help>
              <div v-if="formState.type == 2">
                <a @click="getRoleId">获取：规则来源账号编号</a>
              </div>
            </template>
            <a-input v-model:value="formState.content"></a-input>
          </a-form-item>

          <a-form-item label="当前账号的编号" v-if="formState.type == 2" style="margin-top: 30px">
            <template #help>
              <span></span>
            </template>
            <span>{{ robotId }}（{{ robotLabel }}）</span>
            <a @click="copyToCliboard(robotId)">
              <CopyOutlined />
            </a>
          </a-form-item>
        </a-form>
      </div>

      <div
        style="
          border-top: 1px solid #f0f0f0;
          text-align: right;
          padding-top: 10px;
          padding-right: 10px;
        "
      >
        <a-button @click="cancel" style="margin-right: 10px">取消</a-button>
        <a-button type="primary" @click="handleSubmit">确定</a-button>
      </div>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import * as quotationRulesApi from '@/api/quotationRules'
import { message } from 'ant-design-vue'
import { copyToCliboard } from '@/hooks/util'

const router = useRouter()

const myModal = ref()
const loginForm = ref()

let robotId = ref<string>('')
let robotLabel = ref<string>('')
let theType = ref<number>(1)
const showModal = (id: string, type: number, robatLabel: string) => {
  robotId.value = id
  robotLabel.value = robatLabel
  // console.log('robotId=', robotId.value)
  theType.value = type
  myModal.value?.showModal()
}

const cancel = () => {
  loginForm.value.resetFields()
  myModal.value.cancelModal()
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

let labelText = ref<string>('规则编号')
let labelCol = { span: 8 }
interface FormState {
  type: number
  content: string
}
const formState = ref<FormState>({
  type: 1,
  content: '',
})
import type { Rule } from 'ant-design-vue/es/form'
const rules: Record<string, Rule[]> = {
  content: [{ required: true, message: '不能为空', trigger: 'blur' }],
}

import type { SelectProps } from 'ant-design-vue'
const typeList = ref<SelectProps['options']>([
  {
    label: '单条规则追加',
    value: 1,
  },
  {
    label: '平台账号覆盖',
    value: 2,
  },
])

const change = (e: any) => {
  // console.log(e)
  e == 1 ? (labelText.value = '规则编号') : (labelText.value = '规则来源账号编号')
}

const getRoleId = () => {
  myModal.value.cancelModal()
  router.push('/account')
}

const handleSubmit = () => {
  let params = {
    id: formState.value.content,
    queryType: formState.value.type,
    robotId: robotId.value,
    channel: theType.value,
  }

  loginForm.value.validate().then(async () => {
    try {
      const { state, message: msg } = await quotationRulesApi.getQuotationRuleByCode(params)
      if (state === 200) {
        message.success('操作成功')
        emit('refresh')
        cancel()
      } else {
        message.error(msg)
      }
    } catch (error) {
      message.error('网络请求连接失败~')
    }
  })
}
</script>
